<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <th:block th:include="include :: header('经费批次列表')"/>
</head>
<body class="gray-bg">
<div class="container-div" id="jingfeiqueren">
  <input type="hidden" th:value="${jingfeipiciid}" id="jingfeipiciid"/>
  <input type="hidden" th:value="${deptid}" id="deptid"/>
  <div class="row">
    <div class="col-sm-12 search-collapse">
      <form id="formId1" v-if="isdeptshow">
        <div class="select-list">
          <ul>
            <li>
              <input type="text" name="jingfeipiciid" hidden th:value="${jingfeipiciid}"/>
            </li>
            <li>
              <input type="text" name="deptid" hidden th:value="${deptid}"/>
            </li>
            <li>
              <label style="width:100px;">单位名称：</label>
              <input type="text" name="danweimingcheng"/>
            </li>
            <li>
              <label style="width: 100px;">收款状态：</label>
              <select name="shoukuanzhuangtai">
                <option value ="">所有</option>
                <option value ="0">未收到</option>
                <option value ="1">已收到</option>
              </select>
            </li>
            <li>
              <a class="btn btn-primary btn-rounded btn-sm"
                 onclick="$.table.search('formId1','bootstrap-table1')"><i class="fa fa-search"></i>&nbsp;搜索</a>
              <a class="btn btn-warning btn-rounded btn-sm"
                 onclick="$.form.reset('formId1','bootstrap-table1')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
            </li>
          </ul>
        </div>
      </form>
      <form id="formId2">
        <div class="select-list" v-if="iszhuanjiashow">
          <ul>
            <li>
              <input type="text" name="jingfeipiciid" hidden th:value="${jingfeipiciid}"/>
            </li>
            <li>
              <input type="text" name="deptid" hidden th:value="${deptid}"/>
            <li>
              <label style="width:100px;">专家姓名：</label>
              <input type="text" name="zhuanjiaxingming"/>
            </li>
            <li>
              <a class="btn btn-primary btn-rounded btn-sm"
                 onclick="$.table.search('formId2','bootstrap-table2')"><i class="fa fa-search"></i>&nbsp;搜索</a>
              <a class="btn btn-warning btn-rounded btn-sm"
                 onclick="$.form.reset('formId2','bootstrap-table2')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
            </li>
          </ul>
        </div>
      </form>
    </div>

    <div>
      <a :class="isdeptshow?'btn btn-success changeA' : 'btn btn-white changeA'"
         style="margin-top: 20px;width: 120px;" @click="showdanwei">
        下级单位
      </a>
      <a :class="iszhuanjiashow?'btn btn-success changeA' : 'btn btn-white changeA'"
         style="margin-top: 20px;width: 120px;" @click="showzhuanjia">
        本级专家
      </a>
    </div>
    <div class="col-sm-12 select-table table-striped" style="margin-top: 0;" v-show="isdeptshow">
      <table id="bootstrap-table1"></table>
    </div>
    <div class="col-sm-12 select-table table-striped" style="margin-top: 0" v-show="iszhuanjiashow">
      <table id="bootstrap-table2"></table>
    </div>
  </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
  var datas = [[${@dict.getType('sys_zhuanjiazhuangtai')}]];
  // 获取数据字典数据
  $(function () {
    var options1 = {
      id: "bootstrap-table1",
      url: "/system/jingfeipici/deptlist",
      modalName: "单位列表",
      showSearch: false,
      showColumns: false,
      showToggle: false,
      showRefresh: false,
      columns: [
        {
          field: 'deptid',
          title: '单位id',
          visible: false
        },
        {
          field: 'danweimingcheng',
          title: '单位名称',
        },
        {
          field: 'zongrenshu',
          title: '总人数',
        },
        {
          field: 'shifarenshu',
          title: '实发人数',
        },
        {
          field: 'tingfarenshu',
          title: '停发人数',
        },
        {
          field: 'zongjine',
          title: '总金额',
        },
        {
          field: 'shifajine',
          title: '实发金额',
        },
        {
          field: 'shoukuanzhuangtai',
          title: '收款状态',
          formatter: function (value, row, index) {
            if (value !== null) {
              if (value == 0) return "未收到"
              if (value == 1) return "已收到"
            }
          },
          cellStyle:function(value,row,index){
            if (value !== null) {
              if (value == 0) return {css:{"color":"red"}}
              if (value == 1) return {css:{"color":"green"}}
            }
          }
        },
        {
          field: 'shoukuanshijian',
          title: '收款时间',
        },
/*        {
          field: 'fafangzhuangtai',
          title: '发放状态',
          formatter: function (value, row, index) {
            if (value !== null) {
              if (value == 0) return "未发放"
              if (value == 1) return "已发放"
            }
          },
          cellStyle:function(value,row,index){
            if (value !== null) {
              if (value == 0) return {css:{"color":"red"}}
              if (value == 1) return {css:{"color":"green"}}
            }
          }
        },
        {
          field: 'fafangshijian',
          title: '发放时间',
        }*/

]
    }

    var options2 = {
      id: "bootstrap-table2",
      url: "/system/jingfeipici/zhuanjialist",
      modalName: "专家列表",
      showSearch: false,
      showColumns: false,
      showToggle: false,
      showRefresh: false,
      columns: [
        {
          field: 'zhuanjiaid',
          title: '专家id',
          visible: false
        },
        {
          field: 'zhuanjiaxingming',
          title: '专家姓名',
        },
        {
          field: 'zhuanjiazhuangtai',
          title: '专家状态',
          formatter: function (value, row, index) {
            if (value != null)
              return $.table.selectDictLabel(datas, value);
          }
        },
        {
          field: 'zhuangtaibiangengshijian',
          title: '状态变更时间',
          formatter: function (value, row, index) {
            if (value !== null)
              return row.zhuangtaibiangengshijian.substring(0, row.zhuangtaibiangengshijian.indexOf('T'))
          }
        },
        {
          field: 'shifajine',
          title: '实发金额',
        },
        {
          field: 'bufajine',
          title: '补发金额',
        },
        {
          field: 'tingfashijian',
          title: '停发时间',
          formatter: function (value, row, index) {
            if (value !== null)
              return row.tingfashijian.substring(0, row.tingfashijian.indexOf('T'))
          }
        }
      ]
    }
    $.table.init(options1);
    $.table.init(options2);
  })

</script>
<script th:src="@{/js/system/jingfeipici/jingfei_queren.js?v=1.0}"></script>
</body>
</html>

<style>
  .changeA {
    width: 120px;
    height: 39px;
    margin-top: 20px;
    margin-right: 10px;
    font-size: 20px;
    font-weight: 700;
  }

  /*定义类名为.thead-blue的样式*/
  .table .bigfont th {
    font-size: 20px;
  }
</style>